
<template>
  <div>
    <div class="appbox">
      <!--    左-->
      <div class="left">
        <!--      上-->
        <div class="left-top">
          <el-tree class="tree" :data="deviceTree"  highlight-current :props="defaultProps" empty-text="暂无注册设备"	 @node-click="handleNodeClick">
          <span class = "custom-tree-node" slot-scope = " { node, data }">
            <div :class="data.onLine == 0 ? 'online-dev' : 'notOnline-dev'">
              <i class="device-icon" >
                <img src="@/assets/ptz/dir.png" v-if="data.parentId == 0">
                <img src="@/assets/ptz/lock.png" v-else-if="data.parentId != 0 && data.type == 0" style="vertical-align:middle">
                <img src="@/assets/ptz/demo.png" v-else-if="data.parentId != 0 && data.type == 1" style="vertical-align:middle">
              </i>
              <span :title="data.name+ '['+data.channelId+']'" class="titlename"> {{data.name}}</span>
            </div>
          </span>
          </el-tree>
        </div>
        <!--      下-->
        <div class="left-bottom">
          <div v-if="channelId==''">
            <div style="text-align: center">请选择视频通道</div>
          </div>
          <div v-else>
            <el-tabs v-model="activeName"   class="tabs" type="border-card" @tab-click="getyzw">
              <el-tab-pane name="first"  label="云台控制">
                <div  style="display: flex; flex-direction: column;justify-items: center;align-items: center">
                  <circle-buttons :device-sn="channelId" ></circle-buttons>
                </div>
              </el-tab-pane>
              <el-tab-pane name="second" label="预置位" >
                <div style="height: 250px;overflow: auto; padding: 8px">
                  <el-button @click="addReset">添加预置位</el-button>
                  <div style="display: flex; width: 100%; flex-direction: row; align-items: center ;justify-content: space-around" v-for="item in resetList">
                    <div style="color: #1f71bb;font-weight: bold;">{{item.resetIndex}}</div>
                    <div>{{item.status}}</div>
                    <div style="color: #404040;display: flex; width:60%;flex-direction: row; align-items: center;justify-content: space-between">
                      <div class="diao" @click="yuZhiWei(index+1,1)" >调用</div>
                      <div class="diao" @click="yuZhiWei(index+1,2)" >设置</div>
                      <div class="diao" @click="yuZhiWei(index+1,3)">删除</div>
                      <div class="diao" @click="test12(item)">编辑</div>
                      <div class="diao" @click="xianKuang(item)">显示</div>
                    </div>
                  </div>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
      </div>
      <!--    右-->
      <div class="right">
        <div v-if="liveUrls[0] != null" class="rightview">
              <LivePlayer @snapOutside="snapOutside"
                          class="viewplayer"
                          ref="LivePlayer"
                          :videoUrl="liveUrls[0]"
                          fluent autoplay
                          live stretch
                          alt="请选择设备">
              </LivePlayer>
              <canvas ref="canvas" width="1200" height="675"></canvas>
          </div>
          <div v-else class="rightnull">
            <div class="nullbox">
              <img src="@/assets/ptz/viewlock.png" style="width: 100px;height: 100px;">
              <p style="font-size: 30px; color: #ffffff; margin: 5px; ">请选择预览通道</p>
            </div>
          </div>
      </div>
    </div>

<!--    <div style="display: flex;flex-direction: column;height: 90vh;background-color: #C4D8E6">-->
<!--      <el-row>-->
<!--        <div style=" flex: 1;background-color: #C4D8E6 " >-->
<!--          <el-col :span="5">-->
<!--            <div style="height: 90vh;">-->
<!--&lt;!&ndash;              <el-row>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-col :span="24">&ndash;&gt;-->
<!--&lt;!&ndash;                  <div class="left-top" style="height: 60%">&ndash;&gt;-->
<!--&lt;!&ndash;                    <el-tree class="tree" :data="deviceTree"  highlight-current :props="defaultProps" empty-text="暂无注册设备"	 @node-click="handleNodeClick">&ndash;&gt;-->
<!--&lt;!&ndash;                    <span class = "custom-tree-node" slot-scope = " { node, data }">&ndash;&gt;-->
<!--&lt;!&ndash;                      <div :class="data.onLine == 0 ? 'online-dev' : 'notOnline-dev'">&ndash;&gt;-->
<!--&lt;!&ndash;                        <i class="device-icon" >&ndash;&gt;-->
<!--&lt;!&ndash;                          <img src="@/assets/ptz/dir.png" v-if="data.parentId == 0">&ndash;&gt;-->
<!--&lt;!&ndash;                          <img src="@/assets/ptz/lock.png" v-else-if="data.parentId != 0 && data.type == 0" style="vertical-align:middle">&ndash;&gt;-->
<!--&lt;!&ndash;                          <img src="@/assets/ptz/demo.png" v-else-if="data.parentId != 0 && data.type == 1" style="vertical-align:middle">&ndash;&gt;-->
<!--&lt;!&ndash;                        </i>&ndash;&gt;-->
<!--&lt;!&ndash;                        <span :title="data.name+ '['+data.channelId+']'" class="titlename"> {{data.name}}</span>&ndash;&gt;-->
<!--&lt;!&ndash;                      </div>&ndash;&gt;-->
<!--&lt;!&ndash;                    </span>&ndash;&gt;-->
<!--&lt;!&ndash;                    </el-tree>&ndash;&gt;-->
<!--&lt;!&ndash;                  </div>&ndash;&gt;-->
<!--&lt;!&ndash;                </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-col :span="24">&ndash;&gt;-->
<!--&lt;!&ndash;                  <div v-if="channelId==''">&ndash;&gt;-->
<!--&lt;!&ndash;                    <div style="text-align: center">请选择视频通道</div>&ndash;&gt;-->
<!--&lt;!&ndash;                  </div>&ndash;&gt;-->
<!--&lt;!&ndash;                  <div v-else>&ndash;&gt;-->
<!--&lt;!&ndash;                    <div  class="left-bottom" style="height: 40%">&ndash;&gt;-->
<!--&lt;!&ndash;                      <el-tabs  class="tabs" type="card" @tab-click="getyzw">&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-tab-pane   label="云台控制" :yzw="false">&ndash;&gt;-->
<!--&lt;!&ndash;                          <circle-buttons :device-sn="channelId" ></circle-buttons>&ndash;&gt;-->
<!--&lt;!&ndash;                        </el-tab-pane>&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-button @click="addReset">添加预置位</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-tab-pane label="预置位" :yzw="true">&ndash;&gt;-->
<!--&lt;!&ndash;                          <div style="height: 250px;overflow: auto; padding: 8px">&ndash;&gt;-->
<!--&lt;!&ndash;                            <div style="display: flex; width: 100%; flex-direction: row; align-items: center ;justify-content: space-around" v-for="item in resetList">&ndash;&gt;-->
<!--&lt;!&ndash;                              <div style="color: #1f71bb;font-weight: bold;">{{item.resetIndex}}</div>&ndash;&gt;-->
<!--&lt;!&ndash;                              <div>{{item.status}}</div>&ndash;&gt;-->
<!--&lt;!&ndash;                              <div style="color: #404040;display: flex; width:60%;flex-direction: row; align-items: center;justify-content: space-between">&ndash;&gt;-->
<!--&lt;!&ndash;                                <div class="diao" @click="yuZhiWei(index+1,1)" >调用</div>&ndash;&gt;-->
<!--&lt;!&ndash;                                <div class="diao" @click="yuZhiWei(index+1,2)" >设置</div>&ndash;&gt;-->
<!--&lt;!&ndash;                                <div class="diao" @click="yuZhiWei(index+1,3)">删除</div>&ndash;&gt;-->
<!--&lt;!&ndash;                                <div class="diao" @click="test12(item)">aa</div>&ndash;&gt;-->
<!--&lt;!&ndash;                                <div class="diao" @click="xianKuang(item)">bb</div>&ndash;&gt;-->
<!--&lt;!&ndash;                              </div>&ndash;&gt;-->
<!--&lt;!&ndash;                            </div>&ndash;&gt;-->
<!--&lt;!&ndash;                          </div>&ndash;&gt;-->
<!--&lt;!&ndash;                        </el-tab-pane>&ndash;&gt;-->
<!--&lt;!&ndash;                      </el-tabs>&ndash;&gt;-->
<!--&lt;!&ndash;                    </div>&ndash;&gt;-->
<!--&lt;!&ndash;                  </div>&ndash;&gt;-->
<!--&lt;!&ndash;                </el-col>&ndash;&gt;-->
<!--&lt;!&ndash;              </el-row>&ndash;&gt;-->
<!--            </div>-->
<!--          </el-col>-->
<!--          <el-col :span="19">-->
<!--            <div class="right" style="height: 85vh;">-->
<!--            <div style="background-color: red">-->
<!--&lt;!&ndash;              <div v-if="liveUrls[0] != null" class="rightview">class="viewplayer"&ndash;&gt;-->
<!--&lt;!&ndash;              <div v-if="liveUrls[0] != null" >&ndash;&gt;-->
<!--&lt;!&ndash;                  <LivePlayer @snapOutside="snapOutside"&ndash;&gt;-->
<!--&lt;!&ndash;                              ref="LivePlayer"&ndash;&gt;-->
<!--&lt;!&ndash;                              :videoUrl="liveUrls[0]"&ndash;&gt;-->
<!--&lt;!&ndash;                              fluent autoplay&ndash;&gt;-->
<!--&lt;!&ndash;                              live stretch&ndash;&gt;-->
<!--&lt;!&ndash;                              alt="请选择设备">&ndash;&gt;-->
<!--&lt;!&ndash;                  </LivePlayer>&ndash;&gt;-->
<!--&lt;!&ndash;                  <canvas ref="canvas" width="640" height="360"></canvas>&ndash;&gt;-->
<!--&lt;!&ndash;              </div>&ndash;&gt;-->
<!--&lt;!&ndash;              <div v-else class="rightnull">&ndash;&gt;-->
<!--&lt;!&ndash;                <div class="nullbox">&ndash;&gt;-->
<!--&lt;!&ndash;                  <img src="@/assets/ptz/viewlock.png" style="width: 100px;height: 100px;">&ndash;&gt;-->
<!--&lt;!&ndash;                  <p style="font-size: 30px; color: #ffffff; margin: 5px; ">请选择预览通道</p>&ndash;&gt;-->
<!--&lt;!&ndash;                </div>&ndash;&gt;-->
<!--&lt;!&ndash;              </div>&ndash;&gt;-->
<!--            </div>-->
<!--          </el-col>-->
<!--        </div>-->
<!--      </el-row>-->


      <el-dialog
          title="提示"
          width="1300px"
          :destroy-on-close="true"
          :visible.sync="dialogVisible"
          :before-close="handleClose">
        <div style="width: 1200px;height: 675px;position: relative">
          <DrawingArea :canvas-height="675"
                       :canvas-width="1200"
                       ref="DrawingArea"
                       :videoFrameBase64="jieTu"
                       :nowPonsint="nowPonsint"
                       :juxing="juxing"
                       :vertices="vertices"
                       :lines="lines"
                       :darwType="darwType"
          ></DrawingArea>
        </div>
<!--        <div>-->
<!--          <span @click="selectType(1)">矩形</span>-->
<!--          <span @click="selectType(2)">多边形</span>-->
<!--          <span @click="selectType(3)">折线图</span>-->
<!--        </div>-->
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveDianZiWeiLan(huaType)">保存</el-button>
          </span>
      </el-dialog>
    </div>
</template>
<script>
import LivePlayer from '@liveqing/liveplayer'
import PtzControll from "@/components/Ptz/PtzControll.vue";
import {selectDeviceTree,devPlayer} from '@/api/device/device'
import cache from "@/plugins/cache";
import {addReset, getResetById, getResetList, updateReset, YZWController} from "@/api/sip/sip";
import DrawingArea from "@/views/video/DrawingArea.vue";
import CircleButtons from "@/components/Ptz/CircleButtons.vue";

export default {
  name: "video-index",
  components:{
    CircleButtons,
    LivePlayer,PtzControll,DrawingArea
  },
  created() {
    this.getDeviceTree();
    this.mark = cache.local.getUserName();
  },
  data(){
    return{
      activeName: 'first',
      dialogVisible: false,
      jieTu:"",
      currentModel:1,
      currentDev:undefined,
      //画框方式
      huaType:3,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      // 设备树
      deviceTree:[],
      //通道ID
      channelId:"",
      //设备预置位信息
      queryReset:{
        id: "",
        resetIndex: "",
        deviceId: "",
        isFrame: "",
        frameType: "",
        rectangleStart: "",
        rectangleEnd: "",
        polygonList: "",
        lineList: "",
        snap: "",
        status:"",
        resetName:""
      },
      resetList:[],
      // 播放地址
      liveUrls:[],
      // 水印
      mark:undefined,
      dianItem:"",
      nowPonsint:{x:"",y:""},//当前点的坐标
      juxing:{
        x1:"",
        y1:"",
        x2:"",
        y2:""
      }, //矩形点集合
      vertices:[],  //多边形的点集合
      lines:[],//线的点集合
      darwType:3,// 1、矩形，2、不规则形状，3、折线图
    }
  },
  methods:{
    drawLineChart(x1,y1,x2,y2) {
      console.log("**********开始画线")
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      // 设置线条样式
      ctx.strokeStyle = '#ff0000'; // 红色线条
      ctx.lineWidth = 5; // 线条宽度
      // 绘制直线
      ctx.beginPath();
      ctx.moveTo(x1, y1); // 起点坐标 (x, y)
      ctx.lineTo(x2, y2); // 终点坐标 (x, y)
      ctx.stroke(); // 进行绘制
    },
    drawRectangle(x1,y1,x2,y2) {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.strokeStyle = '#ff0000';
      // 在canvas上画矩形
      ctx.beginPath();
      ctx.rect(x1, y1, x2-x1, y2-y1); // 设置矩形的位置和大小
      ctx.stroke(); // 绘制矩形边框

    },
    drawPolygon(vertices) {
      this.clearCanvas()
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.beginPath();
      ctx.moveTo(vertices[0].x, vertices[0].y);
      for (let i = 1; i < vertices.length; i++) {
        ctx.lineTo(vertices[i].x, vertices[i].y);
      }
      ctx.closePath();
      ctx.strokeStyle = '#ff0000';
      ctx.lineWidth = 2;
      ctx.stroke();
      ctx.fill();
    },
    clearCanvas() {
      const canvas = this.$refs.canvas;
      const ctx = canvas.getContext('2d');
      ctx.clearRect(0, 0, canvas.width, canvas.height);
    },
    drawZhe(lineList){
      for (let i = 0; i < lineList.length-1; i++) {
        this.drawLineChart(lineList[i].x,lineList[i].y,lineList[i+1].x,lineList[i+1].y)
      }
    },
    xianKuang(item){
      getResetById(item).then(res=>{
        console.log( res)
        let lineList= JSON.parse(res.data.lineList)
        this.clearCanvas()
        this.drawZhe(lineList)
      })
    },
    //类型选择
    selectType(e) {
      this.huaType=e
      this.darwType=e;
      this.index=0
      this.DianReset()
      this.$refs.DrawingArea.clearCanvas()
    },
    getyzw(tab, event){
      if(tab.name=="second"){
        this.activeName="second"
      }
    },
    yuZhiWei(chanell,type){
      switch (type) {
        //调用
        case 1: YZWController("exec",this.channelId,chanell).then(res=>{console.log(res)}); break;
        //设置
        case 2: YZWController("add",this.channelId,chanell).then(res=>{console.log(res)});break;
        //删除
        case 3: YZWController("del",this.channelId,chanell).then(res=>{console.log(res)});break;
      }
    },
    checkModel(val){
      console.log(val)
      this.currentModel = val
      this.channelId=val.channelId
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },
    getDeviceTree(){
      selectDeviceTree().then(resp=>{
        this.deviceTree = resp.data
        console.log("******************deviceTree")
        console.log(this.deviceTree)
      })
    },
    async handleNodeClick(data) {
      let channelId = data.channelId;
      this.channelId=channelId
      devPlayer(channelId).then(resp=>{
        console.log(resp)
        let current = this.currentModel;
        this.liveUrls.unshift(resp.msg)
      })
      let res= await this.getResetList()
      this.resetList=res.data
    },
    //查询预置位
    async getResetList(){
      //获取已设置预置位的信息
      this.queryReset.deviceId=this.channelId
      let res=await getResetList(this.queryReset)
       return res
    },
    //添加预置位
    async addReset() {
      let res= await this.getResetList()
      this.resetList=res.data
      this.queryReset.deviceId = this.channelId
      this.queryReset.resetIndex = this.resetList.length + 1
      addReset(this.queryReset).then(async res => {
        console.log(res.data)
        let res2 = await this.getResetList()
        this.resetList = res2.data
      })
    },
    //编辑电子栅栏
    test12(item){
      this.dianItem=item
      this.QueryReset();
      this.DianReset();
      this.$refs.LivePlayer.snap();
    },
    QueryReset(){
      this.queryReset={
        id: "",
        resetIndex: "",
        deviceId: "",
        isFrame: "",
        frameType: "",
        rectangleStart: "",
        rectangleEnd: "",
        polygonList: "",
        lineList: "",
        snap: "",
        status:"",
        resetName:""
      }
    },
    DianReset(){
      this.juxing={
        x1:"",
        y1:"",
        x2:"",
        y2:""
      }; //矩形点集合
      this.vertices=[]; //多边形的点集合
      this.lines=[];//线的点集合
      this.index=0;//记录多边形的有多个顶点
    },
    snapOutside(val){
      this.jieTu=val
      this.dialogVisible=true;
    },
    //保存电子围栏信息
    saveDianZiWeiLan(type){
      switch (type){
        case 1 :
          this.QueryReset();
          this.queryReset.frameType=1;
          this.queryReset.isFrame=1;
          this.queryReset.rectangleStart=JSON.stringify({x1:this.juxing.x1,y1:this.juxing.y1});
          this.queryReset.rectangleEnd=JSON.stringify({x2:this.juxing.x2,y2:this.juxing.y2});
          this.queryReset.snap="";
          this.queryReset.status="1";
          break;
        case 2 :
          this.QueryReset();
          this.queryReset.frameType=2;
          this.queryReset.isFrame=1;
          this.queryReset.polygonList=JSON.stringify(this.vertices);
          this.queryReset.snap="";
          this.queryReset.status="1";
          break;
        case 3 :
          this.QueryReset();
          this.queryReset.frameType=3;
          this.queryReset.isFrame=1;
          this.queryReset.lineList=JSON.stringify(this.lines);
          this.queryReset.snap="";
          this.queryReset.status="1";
          break;
      }
      this.queryReset.id=this.dianItem.id;
      this.queryReset.deviceId=this.dianItem.deviceId;
      this.queryReset.resetIndex=this.dianItem.resetIndex;
      updateReset(this.queryReset).then(res=>{
        console.log(res)

      })
      this.dialogVisible = false;
    }
  }
}
</script>
<style scoped>
.appbox{
  width: 100%;
  display: flex;
  background-color: #1A3B5B;
  flex-direction: row;
}
/**************************************************左*/
.left{
  flex: 0.25;
  display: flex;
  flex-direction: column;
  height: 88.99vh;
  min-height: 650px;
  min-width: 398.5px;
}
/***********************************************************左上*/
.left-top{
  flex: 0.5;
  background-color: #C4D8E6;
}
.left-top /deep/ .el-tree-node__content:foucs{
  border-left:7px solid #65A4DD
}
.left-top /deep/ .el-tree-node__content:hover {
  /* background: #2b3b5256; */
  border-left: 7px solid #65A4DD;
}
.device-icon img{
  width: 20px;
  height: 20px;
  margin-right: 15px;
}
.tree{
  height: 100%;
  overflow: auto;
}
/***********************************************************左下*/
.left-bottom{
  flex: 0.5;
  background-color: #C4D8E6;
}
.diao:hover{
  cursor: pointer;
}
.tabs{
   background-color: #C4D8E6;
   height: 100%;
 }
/**************************************************右*/
.right{
  flex: 0.75;
}
.rightview{
  width: 100%;
  background-color: #85AFC9;
  padding: 28px  40px;
}
.rightnull{
  background-color: #85AFC9;
  padding: 20px;
  height: 94%;
  min-width: 1160px;
}
.nullbox{
  height: 94%;
  min-width: 1155px;
  background-color: #a5cff9;
  border: solid 0.5px #ffffff75;
  border-radius: 0.5%;
  text-align: center;
  align-content: center;
}
.viewplayer{
  width: 1200px;
  height: 675px;
}
canvas{
  position: absolute;
  top: 100px;
}
</style>
